<template>
    <a-menu v-model="current"
      theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
     >
      <a-menu-item key="home">
        <router-link to="/"><a-icon type="home" />Home</router-link>
      </a-menu-item>
      <a-menu-item key="hello" >
           <router-link :to="'/hello'"><a-icon type="appstore" />Hello</router-link>
      </a-menu-item>
      <a-menu-item key="app1" >
           <router-link :to="'/app1'"><a-icon type="appstore" />App1</router-link>
      </a-menu-item>
      <a-sub-menu>
        <span slot="title" class="submenu-title-wrapper"
          ><a-icon type="setting" />Navigation Three - Submenu</span
        >
        <a-menu-item-group title="Item 1">
          <a-menu-item key="setting:1">
            Option 1
          </a-menu-item>
          <a-menu-item key="setting:2">
            Option 2
          </a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group title="Item 2">
          <a-menu-item key="setting:3">
            Option 3
          </a-menu-item>
          <a-menu-item key="setting:4">
            Option 4
          </a-menu-item>
        </a-menu-item-group>
      </a-sub-menu>

    </a-menu>

</template>
<script>
export default {
  data() {
    return {
      current: ['home'],
    };
  },
};
</script>